<template>
     <el-form
        :model="cardForm"
        :label-width="100"
        status-icon
      >
          <el-form-item label="会员卡选择" >
              <el-select
                    v-model="cardForm.cardId"
                    placeholder="-请选择绑定的会员卡-"
                    size="large"
                    style="width: 100%"
                    >
                    <el-option
                        v-for="item in selectList.cardList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                    />
                    </el-select>
          </el-form-item>
          <el-form-item label="充值次数" >
              <el-input-number
                v-model="cardForm.validCount"
                :min="1"
                controls-position="right"
                class="w50"
            />
          </el-form-item>
          <el-form-item label="有效期" >
            <el-input-number
                    v-model="cardForm.validDay"
                    :min="1"
                    controls-position="right"
                    class="w50"
                />
          </el-form-item>
          <el-form-item label="实收金额"  >
             <el-input  placeholder="金额" class="w50" v-model="cardForm.receivedMoney">
                  <template #prepend>
                    <span>￥</span>
                </template>
                <template #append>
                    <span>元</span>
                </template>
             </el-input>
            </el-form-item>
             <el-form-item label="选择支付方式"  v-model="cardForm.payMode">
                  <el-select
                        v-model="cardForm.payMode"
                        placeholder="-请选择支付方式-"
                        size="large"
                        style="width: 100%"
                        >
                        <el-option
                            v-for="item in selectList.payModeList"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                        </el-select>
           </el-form-item>
           <el-form-item label="备注" >
             <el-input v-model="cardForm.note" type="textarea"  />
          </el-form-item>
            <el-form-item>
                <el-button type="danger"  @click="bindConfirm">确认</el-button>
                 <el-button @click="cancelForm">取消</el-button>
            </el-form-item>
    </el-form>
</template>

<script setup>
import {reactive} from 'vue'
const { cardForm, active } = defineProps(['cardForm', 'active', 'drawer', 'editMemberDrawer'])
console.log(cardForm)
//自定义事件
const $emit = defineEmits(['update:active', 'update:drawer', 'update:editMemberDrawer'])

const selectList = reactive({
    cardList: [
        {
            value: '1',
            label: '测试卡',
        },
        {
            value: '2',
            label: '铜卡',
        },
        {
            value: '3',
            label: '金卡',
        },
    ],
    payModeList: [
        {
            value: '1',
            label: '支付宝',
        },
        {
            value: '2',
            label: '微信',
        },
        {
            value: '3',
            label: '现金',
        },
        {
            value: '4',
            label: '银行卡',
        },
    ],
})

const bindConfirm = () => {
    //todo 调用后台接口 保存绑定会员卡的信息
    console.log('===绑定会员卡确认=')
    // active.value = 3
     $emit('update:active', 3)
}

//取消按钮
const cancelForm = () => {
     $emit('update:drawer', false)
    $emit('update:editMemberDrawer', false)
}
</script >
<style lang="less" scoped>
.w50{
    width: 45%;
}
</style>